<?xml version="1.0" encoding="ISO-8859-2"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich">
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2"/>
            <title><h:outputText value="#{ind.title}"/></title>
            <link rel="stylesheet" type="text/css" href="style/main.css"/>
    </h:head>
    <h:body>
        <div id="header"><h1 id="title"><h:outputText value="#{ind.heading}"/></h1></div>
        <ui:include src="WEB-INF/util/menu.xhtml" />
        <p>Modifying hire</p>

        <center>
            <h:form id="form">
                <rich:dataTable value="#{hireList.allItems}" var="hire"
                    iterationStatusVar="it" id="table" rows="5">
                    <rich:column>
                        <f:facet name="header">#</f:facet>
                            #{it.index}
                        </rich:column>
                    <rich:column>
                        <f:facet name="header">id</f:facet>
                        <h:outputText value="#{hire.id}" />
                    </rich:column>
                    <rich:column>
                        <f:facet name="header">Reader</f:facet>
                        <h:outputText value="#{hire.reader}" />
                    </rich:column>
                    <rich:column>
                        <f:facet name="header">Book</f:facet>
                        <h:outputText value="#{hire.book}" />
                    </rich:column>
                    <rich:column>
                        <f:facet name="header">Date of hire</f:facet>
                        <h:outputText value="#{hire.hireDate}" />
                    </rich:column>
                    <rich:column>
                        <f:facet name="header">Date of return</f:facet>
                        <h:outputText value="#{hire.returnDate}" />
                    </rich:column>
                    <rich:column>
                        <a4j:commandLink styleClass="no-decor" execute="@this"
                            render="@none" oncomplete="#{rich:component('confirmPane')}.show()">
                            <h:graphicImage value="/images/icons/delete.gif" alt="delete" />
                            <a4j:param value="#{it.index}"
                               assignTo="#{hireList.currentHireIndex}" />
                        </a4j:commandLink>
                        <a4j:commandLink styleClass="no-decor" render="editGrid"
                            execute="@this" oncomplete="#{rich:component('editPane')}.show()">
                            <h:graphicImage value="/images/icons/edit.gif" alt="edit"/>
                            <a4j:param value="#{it.index}"
                                assignTo="#{hireList.currentHireIndex}" />
                            <f:setPropertyActionListener target="#{hireList.editedHire}"
                                value="#{hire}" />
                        </a4j:commandLink>
                    </rich:column>
                    <f:facet name="footer">
                        <rich:dataScroller page="#{hireList.page}" />
                    </f:facet>
                </rich:dataTable>

                <a4j:jsFunction name="remove" action="#{hireList.remove}"
                    render="table" execute="@this"
                    oncomplete="#{rich:component('confirmPane')}.hide();" />

                <rich:popupPanel id="confirmPane" autosized="true">
                    Are you sure you want to delete the row?
                    <a4j:commandButton value="Cancel"
                        onclick="#{rich:component('confirmPane')}.hide(); return false;" />
                    <a4j:commandButton value="Delete" onclick="remove(); return false;" />
                </rich:popupPanel>

                <rich:popupPanel header="Edit hire" id="editPane"
                                 domElementAttachment="parent" width="400" height="250">
                    <h:panelGrid columns="3" id="editGrid">
                        <h:outputText value="id" />
                        <h:outputText value="#{hireList.editedHire.id}" />
                        <h:panelGroup />

                        <h:outputText value="Reader:" />
                        <rich:autocomplete id="reader" mode="cachedAjax" minChars="2"
                                   autocompleteMethod="#{autocompleteReader.autocomplete}"
                                   value="#{hireList.editedHire.reader}" required="true"
                                   />
                        <h:panelGroup />

                        <h:outputText value="Book:" />
                        <rich:autocomplete id="book" mode="cachedAjax" minChars="2"
                                   autocompleteMethod="#{autocompleteBook.autocomplete}"
                                   value="#{hireList.editedHire.book}" required="true"
                                   />
                        <h:panelGroup />

                        <h:outputText value="Date of hire:" />
                        <h:inputText value="#{hireList.editedHire.hireDate}" required="true"/>
                        <h:panelGroup />

                        <h:outputText value="Date of return:" />
                        <h:inputText value="#{hireList.editedHire.returnDate}" required="false"/>
                        <h:panelGroup />

                    </h:panelGrid>
                    <h:message for="email" errorClass="errors"/>
                    <a4j:commandButton value="Modify" action="#{hireList.store}"
                        render="table" execute="editPane"
                        oncomplete="if (#{facesContext.maximumSeverity==null}) {#{rich:component('editPane')}.hide();}" />
                    <a4j:commandButton value="Cancel"
                        onclick="#{rich:component('editPane')}.hide(); return false;" />
                </rich:popupPanel>
            </h:form>
        </center>

        <ui:include src="WEB-INF/util/footer.xhtml" />
    </h:body>
</html>
